<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="container">
        <form action="http://localhost:3000/form" method="get">
            <label for="">用户名</label>
            <input type="text" name="username" class="username">
            <label for="">密码</label>
            <input type="password" name="password" class="password">
            <label for="">再次输入密码</label>
            <input type="password" name="repassword" class="re-password">
            <button class="btn">注册</button>
        </form>
    </div>

    <script src="./jquery3.5.min.js"></script>
    <script>
        let ele = document.querySelectorAll('.username')[0];
        let password = document.getElementsByClassName('password')[0];
        let pwd = document.getElementsByClassName('re-password')[0];
        let btn = document.querySelector('.btn');

        let flag1 = false
        let flag2 = false
        let flag3 = false
        ele.onblur = checkUsername;
        password.onblur = checkPassword;
        pwd.onblur = checkPwd;

        function checkUsername(e) {
            let value = e.target.value
            let reg = /^[0-9a-zA-Z_-]{4,16}$/;
            if (reg.test(value)) {
                // $.ajax({
                //     type: 'get',
                //     url: 'http://localhost:3000/form',
                //     data: { username: value },
                //     success: function () {
                //         if (username == username) {
                //             alert('用户名重复')
                //         } else {

                //         }
                //     }
                // })

                flag1 = true
            } else {
                flag1 = false
                alert('用户名输入错误')
            }
            checkBtn()
        }
        function checkPassword(e) {
            let value = e.target.value
            let reg = /^[0-9a-zA-Z_-]{8,15}$/;
            if (reg.test(value)) {
                flag2 = true
            } else {
                flag2 = false
                alert('密码输入错误')
            }
            checkPwd()
            checkBtn()
        }
        function checkPwd() {
            let PwdValue = pwd.value;
            let PasswordValue = password.value;
            if (PwdValue === PasswordValue) {
                flag3 = true
            } else if (PwdValue !== PasswordValue && PwdValue != '') {
                flag3 = false
                alert('输入的密码不一致，请重新输入')
            }
            checkBtn()
        }
        btn.onclick = function () {
            alert('success');
        }
        function checkBtn() {
            if (flag1 && flag2 && flag3) {
                btn.disabled = false;
            } else {
                btn.disabled = true;
            }
        }

    </script>
</body>

</html>